<template>
  <div class="scan-container">
    <div class="scan-banner1" :style="height">
      <div>
        <img :src="banner1"/>
      </div>
      <div>
        <img :src="banner2"/>
      </div>
    </div>
    <div class="scan-banner2" :style="height">
      <div>
        <img :src="banner3"/>
      </div>
      <div>
        <img :src="banner4"/>
      </div>
    </div>
    <div class="scan-banner">
      <img :src="footer"/>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      banner1: require('./image/扫码_06.png'),
      banner2: require('./image/扫码_03.png'),
      banner3: require('./image/扫码_11.png'),
      banner4: require('./image/扫码_14.png'),
      footer: require('./image/扫码_18.png'),
      winHeight: document.documentElement.clientHeight
    }
  },
  computed: {
    height () {
      return {
        height: (this.winHeight - 70 * this.$store.getters.rem) / 2 + 'px'
      }
    }
  }
}
</script>
<style scoped lang="less" rel="stylesheet/less">
  .scan-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: url('./image/扫码.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .scan-banner {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 70px;

    > img {
      width: 100%;
    }
  }

  .scan-banner1 {
    display: flex;
    bottom: 400px;
    align-items: center;

    > div {
      flex: 1;
    }

    > div:first-child {
      text-align: center;

      > img {
        width: 70px;
        height: 70px;
      }
    }

    > div:last-child {
      width: 170px;
      height: 170px;
    }
  }

  .scan-banner2 {
    align-items: center;
    display: flex;
    left: 0;
    right: 0;

    > div {
      flex: 1;
    }

    > div:first-child {
      text-align: center;

      > img {
        width: 70px;
        height: 70px;
      }
    }

    > div:last-child {
      height: 200px;

      > img {
        height: 180px;
        width: 160px;
      }
    }
  }
</style>
